<template>
	<view class="container">
		<z-paging ref="paging" v-model="dataList" @query="queryList" :auto="false" :safe-area-inset-bottom="false"
			:loading-more-enabled="false">
			<template #top>
				<view class="header">
					<view class="header-top">
						<view class="header-top-title">
							税票匹配方案
						</view>
						<view class="header-top-time">
							生成时间:{{ info.pipei_time }}
						</view>
					</view>
					<view class="name">{{ info.business_name }}</view>
					<view class="tip">
						<image src="@/static/icon8.png" mode="aspectFill" style="width: 22rpx;height: 22rpx;"></image>
						<text>该企业准入产品: {{ info.count }}款</text>
					</view>
					<view class="xian1">

					</view>
					<view class="xian2">

					</view>
					<v-tabs v-model="current" field="name" :tabs="tabs" @change="changeTab" height="86rpx"
						color="#626576" activeColor="#3B7AFE" lineColor="#3B7AFE" fontSize="30rpx"></v-tabs>
					<view class="tip2">
						该匹配产品仅做推荐参考，请结合实际情况选择适合产品
					</view>
				</view>
			</template>
			<view class="main">
				<view class="list">
					<view class="list-item" v-for="i in dataList" :key="i.id" @click="goDetail(i)">
						<view class="list-item-header">
							<view class="list-item-header-left">
								<view class="list-item-header-left-img">
									<image :src="i.get_product?.icon" mode="aspectFill"></image>
								</view>
								<view class="list-item-header-left-info">
									<view class="title">{{ i.get_product?.name}}</view>
									<view class="tip">{{ i.get_product?.desc}}</view>
								</view>
							</view>
						</view>
						<view class="list-item-body">
							<view class="list-item-body-item">
								<view>
									<text class="label">最高额度：</text>
									<text class="value" style="color: #FF0000;">{{ i.get_product?.money}}万</text>
								</view>
								<view>
									<text class="label">还款方式：</text>
									<text class="value">{{ i.get_product?.repayment}}</text>
								</view>
							</view>
							<view class="list-item-body-item line" style="position: relative;">
								<view>
									<text class="label">年化利率：</text>
									<text class="value">{{ i.get_product?.interest}}</text>
								</view>
								<view>
									<text class="label">贷款期限：</text>
									<text class="value">{{ i.get_product?.cycle }}</text>
								</view>
							</view>
						</view>
						<view class="list-item-footer">
							<view class="list-item-footer-item" v-for="(item,index) in i.explain" :key="index">
								<image src="@/static/noCheck.png" mode="aspectFill" style="width: 24rpx;height: 24rpx;">
								</image>
								<text>{{item}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</z-paging>
		<view class="footer">
			<view class="footer-main">
				<view class="footer-main-btn btn1" @click="downloadPDF">
					<image src="@/static/down2.png" mode="aspectFill" style="width: 38rpx;height: 38rpx;"></image>
					<text>下载方案</text>
				</view>
				<view class="footer-main-btn btn2" @click="handleShare">
					<image src="@/static/share.png" mode="aspectFill" style="width: 38rpx;height: 38rpx;"></image>
					<text>分享方案</text>
				</view>
			</view>
		</view>
		<haibao ref="haibaoRef"></haibao>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref,
		computed,
		watchEffect,
		onMounted
	} from 'vue'
	import {
		onReady,
		onLoad
	} from '@dcloudio/uni-app'
	import {
		getHttpApi
	} from '@/api/api.js'
	const scheme_id = ref(null)
	const status = ref(1)
	onMounted(async () => {
		await paging.value.reload()
	})
	onLoad((options) => {
		scheme_id.value = options.id
		getDetails()
	})
	import haibao from "@/components/haibaoModel/index.vue"
	const paging = ref(null);
	const dataList = ref([])
	const queryList = async (page, limit) => {
		try {
			let res = await getHttpApi({
				route: 'Newfinance.productMatching',
				scheme_id: scheme_id.value,
				status: status.value
			});
			paging.value.complete(res.data);
		} catch (e) {
			paging.value.complete(false);
		}
	}
	const current = ref(0)
	const tabs = ref([{
		id: 1,
		name: `匹配可做产品`
	}, {
		id: 2,
		name: '不推荐产品'
	}])
	const changeTab = (item, index) => {
		console.log(item)
		console.log('当前选中的项：' + index)
		status.value = item.id
		paging.value.reload()
	}
	const haibaoRef = ref(null)
	const handleShare = () => {
		haibaoRef.value.open(info.value)
	}
	// 匹配产品顶部详情
	let info = ref({})
	const getDetails = () => {
		getHttpApi({
			route: 'Newfinance.schemeDetail',
			scheme_id: scheme_id.value,
			type: '3'
		}).then(res => {
			info.value = res.data
		})
	}
	const downloadPDF = () => {
		// PDF文件的远程URL
		const pdfUrl = info.value.report_url;
		// 创建一个隐藏的a标签
		const link = document.createElement('a');
		link.href = pdfUrl;
		link.download = 'filename.pdf'; // 设置下载的文件名
		document.body.appendChild(link);
		link.click();
		document.body.removeChild(link);
	}
	// 下载方案
	const handleDown = () => {
		// getHttpApi({
		// 	route: 'Newfinance.downloadPdf',
		// 	pdf_url: info.value.report_url,
		// 	type: '3'
		// }).then(res=>{

		// })
		window.location.href = info.value.report_url
	}
	const goDetail = (i) => {
		uni.navigateTo({
			url: `/pages/product/details?id=${i.id}`
		})
	}
</script>

<style lang="scss" scoped>
	.footer {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #fff;

		&-main {
			display: flex;
			justify-content: space-between;
			padding: 10rpx 32rpx;

			&-btn {
				width: 328rpx;
				height: 80rpx;
				border-radius: 10rpx;
				text-align: center;
				line-height: 80rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				&>text {
					margin-left: 8rpx;
				}
			}

			&>.btn1 {
				border: 2rpx solid #1A64FF;
				box-sizing: border-box;
				font-weight: 400;
				font-size: 30rpx;
				color: #1A64FF;
			}

			&>.btn2 {
				font-weight: 400;
				font-size: 30rpx;
				color: #FFFFFF;
				background: #1A64FF;
			}
		}
	}

	.xian1 {
		border: 2rpx solid rgba(26, 100, 255, 0.5);
		margin: 0 24rpx 10rpx;
	}

	.xian2 {
		border: 2rpx solid #1A64FF;
		margin: 0 24rpx 10rpx;
	}

	.tip2 {
		font-weight: 400;
		font-size: 24rpx;
		color: #FF9717;
		line-height: 48rpx;
		padding: 26rpx 26rpx 0rpx;
	}

	.name {
		font-weight: 400;
		font-size: 34rpx;
		color: #000000;
		line-height: 48rpx;
		text-align: center;
		padding-top: 50rpx;
	}

	.tip {
		font-weight: 400;
		font-size: 24rpx;
		color: #34C759;
		line-height: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		padding-bottom: 36rpx;
	}

	.header {
		&-top {
			background-image: url('../../static/head.png');
			width: 750rpx;
			height: 175rpx;
			background-size: 100% 100%;
			display: flex;
			flex-direction: column;
			justify-content: center;

			&-title {
				font-weight: 400;
				font-size: 40rpx;
				color: #FFFFFF;
				line-height: 48rpx;
				text-align: center;
			}

			&-time {
				font-weight: 400;
				font-size: 24rpx;
				color: #FFFFFF;
				line-height: 48rpx;
				text-align: center;
			}
		}
	}

	.list {
		padding: 20rpx 25rpx 100rpx;

		&-item {
			padding: 24rpx 22rpx 18rpx 20rpx;
			background: #FFFFFF;
			border-radius: 10rpx 10rpx 10rpx 10rpx;
			margin-bottom: 24rpx;

			&-footer {
				display: flex;
				flex-wrap: wrap;
				justify-content: start;
				background: #F4F5F9;
				border-radius: 10rpx;
				padding: 24rpx 26rpx;

				&-item {
					width: 33%;
					display: flex;
					align-items: center;
					font-weight: 400;
					font-size: 24rpx;
					color: #3D3D3D;

					&>text {
						margin-left: 12rpx;
						line-height: 48rpx;
					}
				}
			}

			&-body {
				display: flex;
				margin-top: 34rpx;
				position: relative;
				justify-content: space-between;

				&-item {
					font-weight: 400;
					font-size: 24rpx;
					width: 48%;

					&>view {
						margin-bottom: 18rpx;
						display: flex;

						&>text {
							display: inline-block;
						}

						&>text:nth-child(2) {
							flex: 1;
						}
					}
				}
			}

			&-header {
				display: flex;
				align-items: center;
				justify-content: space-between;

				&-left {
					display: flex;

					&-img {
						width: 84rpx;
						height: 84rpx;
						border-radius: 10rpx;
						margin-right: 20rpx;
					}
				}


			}
		}
	}

	image {
		width: 100%;
		height: 100%;
	}
</style>